let apiList = [
    { name: '全部', keyword: '身份真实姓名', isnow: false },
    { name: '生活服务', keyword: '银行卡', isnow: false },
    { name: '金融科技', keyword: '短信', isnow: false },
    { name: '交通地理', keyword: '天气', isnow: false },
    { name: '充值缴费', keyword: '短信', isnow: false },
    { name: '数据智能', keyword: '手机', isnow: false },
    { name: '企业工商', keyword: 'IP', isnow: false },
    { name: '应用开发', keyword: '手机', isnow: false },
    { name: '电子商务', keyword: 'IP', isnow: false },
    { name: '吃喝玩乐', keyword: '视频', isnow: false },
    { name: '文娱视频', keyword: '视频', isnow: false },
    { name: '免费接口大全', keyword: '短信', isnow: true },
    { name: '短信', keyword: '手机', isnow: false },
    { name: '汽车', keyword: '银行卡', isnow: false },
    { name: '核验', keyword: '身份真实姓名', isnow: false },
    { name: '最新发布', keyword: 'app', isnow: true },
    { name: 'API私有化部署', keyword: '身份真实姓名', isnow: true },
]
// let navA = $(".api-nava")
// let apiLis = $("#apiLis")
// let sum = ""
// let search = $(".api-nava-search")
// apiList.forEach(function (v, i) {
//     sum +=
//         `
//     <a>${v.name}</a>

//     `
// })

// apiLis.innerHTML = sum;
// apiLis.getElementsByTagName("a")[0].style.borderColor = "#00bdff"
// apiLis.getElementsByTagName("a")[0].style.color = "#00bdff"
// apiLis.addEventListener("click", function (v) {
//      let inPut=$("#inPut")
//     let zs = v.target
//     if (zs.nodeName.toLowerCase() === "a") {
//         search.textContent = zs.innerHTML
//         console.log(zs.getAttribute("keyword"));
//         inPut.placeholder=zs.getAttribute("keyword")
//     }
// })

let apiZ = $("#api-Z")
let search = $(".api-nava-search")
apiList.forEach(function (v, i) {
    let newA = document.createElement("a")
    newA.innerText = v.name
    newA.className = "api-nav-item";
    newA.setAttribute("keyword", v.keyword);
    if (i === 0) {
        newA.className = " api-nav-item active";
    }
    apiZ.append(newA);
})




let colorFz = $(".api-nav  .color-fz")
let inPut = $("#inPut")
apiZ.addEventListener("click", function (e) {
    let target = e.target;
    if (target.nodeName.toLowerCase() === "a") {
        colorFz.textContent = target.innerText;
        inPut.placeholder = target.getAttribute("keyword");
        let aDoms = $All(".api-nav-item");
        console.log(aDoms);
        for (let i = 0; i < aDoms.length; i++) {
            aDoms[i].classList.remove("active");
        }
        target.classList.add("active")
    }
})








// ------------------------------------------------------------------
let listDataArr = [
    //第一行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },

    //第二行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    //第三行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    //第四行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },

]

const apiContent = $("#apiContent")
// 函数的封装
ADD(listDataArr)
function ADD(arr){
    apiContent.innerHTML=""
    arr.forEach(function (obj, i) {
        // 创建标签
        let newLi = document.createElement("li")
        //   创建类名
        newLi.className = "list-item fl"
     
        
        // 添加内容
        newLi.innerHTML = `
            <span class="special ${obj.isSpecial?"on":"off"}">企业专用</span>
            <div class="content txt-center ads">
                <img src="./images/images/${obj.img}" alt="">
                <p class="api-name">${obj.name}</p>
                <p class="api-price ${obj.isSpecial?"color-red":"color-green"}">${obj.price}</p>
            </div>
            <a class="apply-data txt-center">申请数据</a>    
            `
        //    添加到ul中
        apiContent.append(newLi)
    })
}






let listDataArrPage2 = [
    //第一行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },

]
const papgs=$All(".page-num")
papgs.forEach(function(v,i){
   v.addEventListener("click",function(){
    if (i==0) {
        ADD(listDataArr)
    }else if (i==1) {
        ADD(listDataArrPage2)
    }else{
        alert("我真的一滴都没有了！")
    }
    for(let j=0;j<papgs.length;j++){
          papgs[j].classList.remove("current-page")
    }
     this.classList.add("current-page")
   })
})


// 模态框
let applyData=$All(".apply-data")
let modalBox=$(".modal-box")
let modalBox1 =$('.modal-box1')
 
applyData.forEach(function(v){
    v.addEventListener("click",function(){
        modalBox.classList.remove("zzz")
    })
   modalBox.classList.add("block")
 })
 modalBox.addEventListener("click",function(e){
    
    modalBox.classList.add("zzz")
    
 });
 modalBox1.addEventListener('click',function(e){
    e.stopPropagation()
 })
 let as=$("#modal-box11")
 let form = document.querySelector("form");
 let qr = document.querySelector(".qr");
 let ad=$("#modal-box12")

 as.addEventListener("click",function(){
    this.classList.add("modal-box1-id");
    ad.classList.remove("modal-box1-id");
    form.classList.remove("zzz");
    qr.classList.add("zzz");
 })
 ad.addEventListener('click', function() {
    this.classList.add("modal-box1-id");
    as.classList.remove("modal-box1-id");
    form.classList.add("zzz");
    qr.classList.remove("zzz");
})










